<template>
    <div class="home">
        <wx-no-data-share-body></wx-no-data-share-body>
        <wx-hide-menu v-if="wxHideMenu"></wx-hide-menu>
        <div class="box">
            <transition name="home" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
                <div v-if="selected == 'tab1'" class="box">
                    <ul class="nav-bar-list displayFlex">
                        <li class="nav-bar-item positionR flex1 text-center" @click.self="lookTap(navBartap)"
                            :class="{'active':navBarActive==0 || navBarActive==1}">
                            {{navBar1Text}} <img class="down-assass-icon" v-if="userId"
                                src="../../assets/images/home/down_assass_icon.png" alt="">
                            <transition name="showMore" enter-active-class="animated zoomIn"
                                leave-active-class="animated zoomOut">
                                <ul class="list-hidden" v-if="showMore && userId">
                                    <li class="commant" @click.prevent="lookTap(0)">
                                        <img class="home-down-assass transform180"
                                            src="../../assets/images/home/down_assass_icon.png" alt="">
                                        推荐
                                    </li>
                                    <li class="attention" @click.prevent="lookTap(1)">关注</li>
                                    <li class="transparent-bg-com" @click="showMore=false"></li>
                                </ul>
                            </transition>
                            <div class="tab-line" v-if="this.userId"></div>
                        </li>
                        <!--<li class="nav-bar-item" @click="lookTap(1)" :class="{'active':navBarActive==1}">关注</li>-->
                        <li class="nav-bar-item flex1 text-center" v-if="userId" @click="lookTap(2)"
                            :class="{'active':navBarActive==2}">自己</li>
                    </ul>
                    <good-looking @isShowHomeTap="isShowHomeTap" v-if="showLookList.includes('navBarActive1')"
                        v-show="navBarActive == 0" :propsPage="dealPropsPage(0)"></good-looking>
                    <good-looking @isShowHomeTap="isShowHomeTap" v-if="showLookList.includes('navBarActive2')"
                        v-show="navBarActive == 1" :propsPage="dealPropsPage(1)"></good-looking>
                    <good-looking @isShowHomeTap="isShowHomeTap" v-if="showLookList.includes('navBarActive3')"
                        v-show="navBarActive == 2" :propsPage="dealPropsPage(2)"></good-looking>
                </div>
                <activity @isShowHomeTap="isShowHomeTap" v-else-if="selected == 'tab2'" :propsPage="propsPage">
                </activity>
                <im-home v-else-if="selected == 'tab3'" :propsPage="propsPage"></im-home>
                <card-list v-else-if="selected == 'tab4'"></card-list>
            </transition>
        </div>
        <ul class="width-full displayFlex tapbar" v-if="tapShow && $route.query.ttn !=1"
            :class="{'selected1':selected == 'tab1','selected2':selected == 'tab2','selected3':selected == 'tab3' || selected == 'tab4'}">
            <li class="tab-selected1-blur" v-if="selected == 'tab1'"></li>
            <li class="flex1 tapbar-item" :class="{active:selected == 'tab1'}" @click="tapList('tab1')">达人</li>
            <li class="flex1 tapbar-item" :class="{active:selected == 'tab2'}" @click="tapList('tab2')">生活</li>
            <li class="flex1 tab-center-icon displayFlex flexCenter">
                <!--<span @click="openHKHWConfirm('好看好玩支持发布作品')" class="home-add-box displayFlex flexCenter"-->
                <!--:class="{'change-add-icon':selected == 'tab2'}">-->
                <!--&lt;!&ndash;<span class="iconfont icon-add home-icon-add"></span>&ndash;&gt;-->
                <!--</span>-->
                <img @click="openHKHWConfirm('好看好玩支持发布作品')" class="home-icon-add add-icon"
                    :src="staticImageUrl('/images/look/index_add_icon.png')" alt="" />
            </li>
            <li class="flex1 tapbar-item" :class="{active:selected == 'tab3'}" @click="tapList('tab3')">
                <span class="hint" v-show="hintList && hintList.length > 0 && selected !== 'tab3'"></span>
                消息</li>
            <li class="flex1 tapbar-item" :class="{active:selected == 'tab4'}" @click="tapList('tab4')">卡包</li>
        </ul>
    </div>
</template>
<script>
/*凡是涉及到document.addEventListener('WeixinJSBridgeReady',()=>{})这个的时候就不能用组件的懒加载，要不然不能触发*/
import GoodLooking from "../../pages/goodLooking/NewLook";
import Activity from "../../pages/amusing/NewAmusing";
import XLocation from '../../x/XLocation'
import { mapMutations } from 'vuex';
import XThirdLogin from "../../x/XThirdLogin";
export default {
    name: "Home",
    data () {
        return {
            selected: 'tab2',
            tabBarSelected: '1',
            showLookList: [],//存储几个好看
            showAmusingList: [],//存储几个tab,防止每次都去刷新
            navBarActive: -1,
            navBartap: 0,
            isXLocationed: false,
            tapShow: true,
            showMore: false,
            navBar1Text: '推荐',//好看默认视频类型
            wxHideMenu:false,
            propsPage: {
                bottomDownShow: false,
            },
        }
    },
    created () {
        /*微信登录*/
        // if (!this.isLogin()) {
        //     this.toThirdLogin();
        //     return
        // }
        /*TODO 临时处理，只能在微信里面做这次活动*/
        if (!this.v_is_weixin && !(window.location.href.includes('192.168.1') || window.location.href.includes('test.haokanhaowan.cn'))) {
            XThirdLogin.toWxOpen();
        }
        this.selected = this.$route.query.page || 'tab2';
        this.tapList(this.selected, true);
        // this.$store.getters.currentUserStoreDiscountFn
    },
    mounted () {
        let index = this.$route.query && this.$route.query.navBarActive ? this.$route.query.navBarActive : 0;
        this.lookTap(index);
        /*获取用户地理信息*/
        if (!this.isXLocationed) {
            this.isXLocationed = true;
            XLocation.userGetHeSelfLocation();
        }
        let params = {
            thirdId: this.thirdId || 0,
            userId: this.userId || 0,
            storeId: this.storeId || 0,
        }
        setTimeout(()=>{
            this.wxHideMenu=true;
        },300)
        this.merStoreGetStoreInfo(params);
        this.$store.commit('createNeplayerRoom')
    },
    beforeDestroy () {
        // if(this.$store.state.logic.groupChat.nim){
        //     this.$store.state.logic.groupChat.nim.disconnect();
        // }
    },
    methods: {
        ...mapMutations(['merStoreGetStoreInfo']),
        dealPropsPage (index) {
            let tempPropsPage = { bottomDownShow: false, showItem: index };
            return tempPropsPage;
        },
        lookTap (index) {
            if ((index == 1 || index == 2) && !this.userId) {
                this.$router.push('/to/login');
            }
            if (index == 0) {
                if (this.navBarActive != index) {
                    $("video").each(function (index, ele) {
                        $('video').eq(index)[0].pause();
                    });
                }
                if (this.showMore) {
                    this.showMore = false;
                } else if (this.navBarActive == 0 || this.navBarActive == 1) {
                    this.showMore = true;
                }
                this.navBartap = 0;
                this.navBar1Text = "推荐";
                this.showLookList.push('navBarActive1');
            } else if (index == 1) {
                if (this.showMore) {
                    this.showMore = false;
                } else if (this.navBarActive == 0 || this.navBarActive == 1) {
                    this.showMore = true;
                }
                this.navBartap = 1;
                this.navBar1Text = "关注";
                this.showLookList.push('navBarActive2');
            } else if (index == 2) {
                this.showLookList.push('navBarActive3');
            }
            this.navBarActive = index;
            window.sessionStorage.setItem('navBarActive', index);
            this.selected = this.$route.query.page || 'tab2';
            this.tapList(this.selected, true);
        },
        isShowHomeTap (boolean) {
            this.tapShow = boolean;
        },
        tapList (tab, isInit) {
            if (tab == 'service') {
                sessionStorage.clear('hintList');
            }
            let that = this;
            //改变路由的后缀
            let routerPath = this.$router.path;
            let query = this.$router.history.current.query;
            if (!isInit && query && Object.keys(query).includes('shareId')) {
                delete query.shareId
            }
            let queryMsg = {};
            let navBarActive = window.sessionStorage.getItem('navBarActive') || query.navBarActive || '0';
            switch (tab) {
                case 'tab1':
                    queryMsg = { page: 'looking', navBarActive: navBarActive };
                    that.selected = 'tab1';
                    break;
                case 'tab2':
                    queryMsg = { page: 'activity' };
                    that.selected = 'tab2';
                    break;
                case 'tab3':
                    if (!this.userId) {
                        this.$router.push('/to/login');
                        break;
                    }
                    queryMsg = { page: 'service' };
                    that.selected = 'tab3';
                    break;
                case 'tab4':
                    if (!this.userId) {
                        this.$router.push('/to/login');
                        break;
                    }
                    queryMsg = { page: 'card' };
                    that.selected = 'tab4';
                    break;
                case 'looking':
                    queryMsg = { page: 'looking', navBarActive: navBarActive };
                    that.selected = 'tab1';
                    break;
                case 'activity':
                    queryMsg = { page: 'activity' };
                    that.selected = 'tab2';
                    break;
                case 'service':
                    if (!this.userId) {
                        this.$router.push('/to/login');
                        break;
                    }
                    queryMsg = { page: 'service' };
                    that.selected = 'tab3';
                    break;
                case 'card':
                    if (!this.userId) {
                        this.$router.push('/to/login');
                        break;
                    }
                    queryMsg = { page: 'card' };
                    that.selected = 'tab4';
                    break;
            }
            queryMsg = Object.assign({}, query, queryMsg);
            this.$router.push({ path: routerPath, query: queryMsg });
        },
    },
    watch: {
        '$route' (to, from) {
            this.$router.go(0);
        }
    },
    computed: {
        hintList () {
            return this.$store.getters.getterHintList
        }
    },
    components: {
        'good-looking': GoodLooking,
        'activity': Activity,
        'card-list': () => import("../cardPackage/CardList"),
        'im-home': () => import("../im/Im"),
        'wx-hide-menu': () => import('../../components/wx/WxHideMenu'),
        'wx-no-data-share-body': () => import('../../components/wx/WxNoDataShareBody'),
    },
}
</script>

<style scoped lang="scss">
@import url($css_root + "css/home.css");
.animated.zoomIn,
.animated.zoomOut {
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms; // 动画执行时间
}
@media screen and (max-width: 375px) {
    font-size: 14px !important;
}
.hint {
    position: absolute;
    top: 0.1rem;
    right: 0.15rem;
    display: block;
    width: 0.08rem;
    height: 0.08rem;
    background: red;
    border-radius: 50%;
}
.box {
    height: 100vh;
    width: 100vw;
}
</style>